<template>
  <view class="category-head-mutli">
    <!-- 监听滚动事件, 需要处理底部滚动进度条 -->
    <scroll-view scroll-x @scroll="onScroll">
      <view class="scroll-wrap">
        <view class="category-head-mutli-item">
          <navigator v-for="index in [0, 1, 2, 3, 4, 5, 6, 7]" :key="index">
            <image :src="category[index].icon" mode="widthFix" />
            <text>{{ category[index].name }}</text>
          </navigator>
        </view>
        <view class="category-head-mutli-item">
          <navigator v-for="index in [8, 9]" :key="index">
            <image :src="category[index].icon" mode="widthFix" />
            <text>{{ category[index].name }}</text>
          </navigator>
        </view>
      </view>
    </scroll-view>
    {{ left }}
    <!-- 灰色滚动进度条容器 -->
    <view class="scroll-bar">
      <!-- 进度条本身 -->
      <view
        class="scroll-bar-inner"
        :style="{ transform: `translateX(${left}%)` }"
      ></view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["safeArea"]),
  },
  props: {
    category: Array,
  },
  data() {
    return {
      // 这个值随着滚动变化, 同时控制进度条 left 偏移量
      left: 0,
    };
  },
  props: {
    category: Array,
  },
  methods: {
    onScroll(e) {
      console.log("滚动事件发生", e);
      // 监听滚动事件，获取向左滚动的百分比
      const percent = (e.detail.scrollLeft / this.safeArea.width) * 100;

      // 修改left的值
      this.left = percent;
    },
  },
  // 题目需求:
  // 传入一个一维数组, 将里面的数据没八个分一组,
  // 最后返回, 以这些分组组成结果, 一个二维数组
  // 传入 [0,1,2,3,4,5,6,7,8,9]
  // 传出 [[0,1,2,3,4,5,6,7], [8,9]]
  //   computed: {
  //     wrapList() {
  //       let tmp = [];
  //       const res = [];
  //       this.category.forEach((element, index) => {
  //         tmp.push(element);
  //         if (tmp.length === 8 || index === this.category.length - 1) {
  //           res.push(tmp);
  //           tmp = [];
  //         }
  //       });
  //       return res;
  //       // [[1,2,3,4,5,6,7,8], [9,0]]
  //     },
  //   },
};
</script>

<style lang="scss">
.category-head-mutli {
  background-color: #f7f7f8;
  position: relative;
  padding-bottom: 30rpx;
  .scroll-wrap {
    width: 200%;
    display: flex;
  }
  .category-head-mutli-item {
    width: 50%;

    display: flex;
    flex-wrap: wrap;
    navigator {
      text-align: center;
      width: 20%;
      padding: 15rpx;

      image {
        width: 100rpx;
        display: block;
        margin: 0 auto;
      }
      text {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
  .scroll-bar {
    position: absolute;
    bottom: 15rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 100rpx;
    height: 8rpx;
    background-color: #e2e2e2;
    z-index: 200;
    .scroll-bar-inner {
      width: 50%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background-color: #00c09b;
    }
  }
}
</style>
